<template>
  <div class="MonitorPage">
    <div class="left-panel">
      <GymStatus class="status-panel" />
    </div>
    <div class="center-panel">
      <GymModel ref="gymModel" class="model-window" />
    </div>
    <div class="right-panel">
      <div class="switch-panel">
        <el-button
          type="primary"
          icon="el-icon-sunrise"
          @click="toggleLight"
        >{{ lightOn ? '开灯' : '关灯' }}</el-button>
        <el-button
          type="primary"
          icon="el-icon-lock"
          @click="togglePower"
        >{{ powerOn ? '断电' : '电源' }}</el-button>
        <el-button
          type="primary"
          icon="el-icon-water-cup"
          @click="toggleWater"
        >{{ waterOn ? '关水' : '水源' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Button } from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import GymModel from "./GymControl/GymModel.vue";
import GymStatus from "./GymControl/GymStatus.vue";

export default {
  name: "MonitorPage",
  components: {
    GymModel,
    GymStatus,
    ElButton: Button
  },
  data() {
    return {
      lightOn: false,
      powerOn: false,
      waterOn: false
    };
  },
  methods: {
    toggleLight() {
      this.lightOn = !this.lightOn;
      this.$refs.gymModel.toggleLight();
    },
    togglePower() {
      this.powerOn = !this.powerOn;
      // 实现电源逻辑
    },
    toggleWater() {
      this.waterOn = !this.waterOn;
      // 实现水源逻辑
    }
  }
};
</script>

<style scoped>
.MonitorPage {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  height: 100vh;
  background-color: #f0f2f5;
}

.left-panel,
.center-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  margin: 10px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.model-window {
  width: 100%;
  height: 100%;
}

.switch-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.switch-panel .el-button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
}
</style>
